<template>
  <div class="header-box">
    <div class="dropdown">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
    </div>
    <div class="search">
      <input placeholder="搜搜您的爱放吧！" />
      <van-icon name="location" size="60px" color="green" />
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import { ref } from "vue";
const value1 = ref(0);
const option1 = [{ text: "北京", value: 0 }];
</script>
  
  <style scoped lang="scss">
.header-box {
  border: 1px solid #ccc;
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dropdown {
  width: 100px;
  height: 60px;
  margin-top: 11px;
}
.search {
  width: 70%;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 5px;
  input {
    border: 0px;
    outline: 0px;
    width: 100%;
    height: 100%;
    text-indent: 10px;
  }
}
</style>
  